<template>
  <div>
    <van-nav-bar
      title="安全中心"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <Bg>
      <van-cell is-link @click="showPopup">修改密码</van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <van-form @submit="onSubmit">
          <van-field
            v-model="Orpassword"
            name="旧密码"
            label="旧密码"
            placeholder="旧密码(首字符必须为字母)"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="Newpassword"
            type="password"
            name="新密码"
            label="密码"
            placeholder="新密码(首字符必须为字母)"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-popup>
      <van-cell is-link @click="showLogout">注销账户</van-cell>
      <van-dialog v-model="Logout" title="注销账号" show-cancel-button>
        <span class="Logout">是否确认注销账号，一旦注销将无法恢复！</span>
      </van-dialog>
      <div class="btnbox">
        <van-button round block color="#0C34BA" @click="LogOut"
          >退出登录</van-button
        >
      </div>
    </Bg>
  </div>
</template>

<script>
import Bg from "../components/Bg.vue";
import "../assets/less/SafetyCenter.less";
export default {
  name: "SafetyCenter",
  data() {
    return {
      show: false,
      Logout: false,
      username: "",
      Newpassword: "",
      Orpassword:"",
    };
  },
  components: {
    Bg,
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    back() {
      this.$router.go(-1);
    },
    showPopup() {
      this.show = true;
    },
    showLogout() {
      this.Logout = true;
    },
    LogOut() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "POST",
        url: this.baseUrl + "/logout",
        data: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          //   console.log("res LogOut ==> ", res);
          this.$toast.clear();

          if (res.data.code === "F001") {
            console.log("退出登录成功");
            return this.$router.push({ name: "Login" });
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>

<style>
</style>